<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParames" class="demo-form-inline">
      <el-form-item label="类型名称">
        <el-input v-model="queryParames.machineryTypeName" placeholder="请输入设备类型名称"
          clearable
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="queryParames.enableFlag" placeholder="请输入选择是否启用">
          <el-option
            v-for="dict in dict.type.sys_yes_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="primary" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="machineryTypeId"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="machineryTypeName"
        label="分类"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="machineryTypeCode"
        label="类型编号">
      </el-table-column>
      <el-table-column
        prop="enableFlag"
        label="是否开启"
        sortable
        width="180">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag" />
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        sortable
        width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
          >新增</el-button>
          <el-button
            v-if="scope.row.parentTypeId != 0"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!-- 添加表单   -->
    <el-dialog title="新增设备类型" :visible.sync="showFlag" width="700px">
        <el-form :model="form" ref="form" label-width="120px">
          <el-row>
            <el-col :span="24" v-if="form.parentTypeId !== 0">
              <el-form-item label="父类型" prop="parentTypeId">
                <el-select v-model="form.parentTypeId" :disabled = "disableF">
                  <el-option
                    :label="form.parentTypeName"
                    :value="form.parentTypeId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备类型名称" prop="machineryTypeName">
                <el-input v-model="form.machineryTypeName" placeholder="请输入设备类型名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否启用" prop="enableFlag">
                <el-radio-group v-model="form.enableFlag" >
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改表单   -->
    <el-dialog title="修改设备类型" :visible.sync="changeFlag" width="700px">
      <el-form :model="changeForm" ref="form" label-width="120px">
        <el-row>
          <el-col :span="24" v-if="changeForm.parentTypeId !== 0">
            <el-form-item label="父类型" prop="parentTypeId">
              <el-select v-model="changeForm.parentTypeId" >
                <el-option
                  :label="changeForm.parentTypeName"
                  :value="changeForm.parentTypeId"
                />
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备类型名称" prop="machineryTypeName">
              <el-input v-model="changeForm.machineryTypeName" placeholder="请输入设备类型名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="enableFlag">

              <el-radio-group v-model="changeForm.enableFlag" >
                <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="changeForm.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeFormSubmit">确 定</el-button>
        <el-button @click="changeFormCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addType, deleteType, getInfoType, getParentInfo, listTree, updateType} from "@/api/dv/type";

export default {
  name: "Machinerytype",
  dicts: ['sys_yes_no'],
  data() {
    return {
      changeFlag:false,
      disableF:false,
      parentTypeObj:{},
      // 设备类型树选项
      machinerytypeOptions: [],
      form:{},
      changeForm:{
        // 显式声明所有需要的属性，初始值根据实际情况设置
        parentTypeId: null,
        machineryTypeName: '', // 关键：初始化输入框绑定的属性
        machineryTypeId: null,
        enableFlag: null,
        remark: '', // 关键：初始化备注输入框的属性
        parentTypeName: '',
      },
      queryParames: {
        machineryTypeCode: null,
        machineryTypeName: null,
        parentTypeId: null,
        ancestors: null,
        enableFlag: null,
        remark:null,
      },
      tableData: [],
      showFlag: false,
      parentTypeName:null,
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    submitForm(){
      this.$refs["form"].validate((valid) => {
        if (valid) {
            console.log("新增设备类型",this.form)
            addType(this.form).then(res=>{
              this.$modal.msgSuccess("新增成功")
              this.showFlag=false
              this.getTree()
            })
        }
      });
    },
    cancel(){
      this.showFlag = false
      this.reset()
    },
    getTree(){
        listTree().then(res=>{
          console.log("hutool-tree",res.data)
          this.tableData = res.data
        })
    },
    handleDelete(row){
      this.$confirm('确认删除选中设备类型吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除操作
        deleteType(row.machineryTypeId).then(res=>{
          this.$modal.msgSuccess("删除成功")
          this.getTree()
        })
      }).catch(() => {
        // 取消删除
        this.$modal.msgInfo("已取消删除")
      });
    },
    handleReset(){
      this.queryParames = {
        machineryTypeCode: null,
        machineryTypeName: null,
        parentTypeId: null,
        ancestors: null,
        enableFlag: null,
        remark:null,
      }
      this.getTree()
    },
    handleQuery(){
      getInfoType(this.queryParames).then(res=>{
        console.log("getInfoType",res.data)
        this.tableData = res.data
      })
    },
    // 表单重置
    reset() {
      this.form = {
        machineryTypeId: null,
        machineryTypeName: null,
        parentTypeId: 1,
        enableFlag: 'Y',
        remark: null,
      }
      this.resetForm("form");
    },
    changeReset(){
      this.changeForm = {
        machineryTypeId: null,
        machineryTypeName: null,
        parentTypeId: 1,
        enableFlag: 'Y',
        remark: null,
      }
      this.resetForm("changeForm");
    },
    changeFormCancel(){
      //this.disableF = true
      this.changeFlag = false
    },
    changeFormSubmit(){
      updateType(this.changeForm).then(res=>{
        this.$modal.msgSuccess("修改成功")
        this.changeFlag=false
        this.getTree()
      })

    },
    handleUpdate(row){
      //console.log("parentId",row.parentId)
       this.changeFlag = true
      this.changeForm.parentTypeId=row.parentId
      this.changeForm.machineryTypeName=row.machineryTypeName
      this.changeForm.machineryTypeId=row.machineryTypeId
      this.changeForm.enableFlag=row.enableFlag
      this.changeForm.remark=row.remark
      // this.changeForm = {...row}
      this.changeForm.createTime = null
        //得到父级的名称
        getParentInfo(row.parentId).then(res=>{
          this.changeForm.parentTypeName = res.data.machineryTypeName
        })
      //this.getTree();
    },
    handleAdd(row){
      this.reset()
      this.disableF = true
      this.form.parentTypeName=row.machineryTypeName
      this.form.parentTypeId = row.machineryTypeId
      this.getTree();
      this.title = '新增设备类型'
      this.showFlag = true
    },
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped lang="scss">

</style>
